<template>
	<view class="main">
		<view class="hand">
			<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//dbleft.png" @click="blackbtn"></image>
			包月添加费率
		</view>
		<view class="show">
			<view class="sone">
				<input placeholder="输入套餐名字" v-model="packageName" maxlength="50" />
			</view>
			<van-tabs v-model="active" @click="onClick">
				<van-tab title="计次">
					<view class="stap">
						<view class="stapone">
							<view class="staponeleft">
								收费标准：
							</view>
							<input placeholder="元/月" v-model="monthStandard" type="digit" maxlength="8"/>
							<view class="staponeleft1">
								元/月
							</view>
						</view>
						<view class="stapone">
							<view class="staponeleft">
								每月限制：
							</view>
							<input placeholder="次" v-model="monthNum" type="digit" v-input-limit='0' maxlength="6"/>
							<view class="staponeleft1">
								次
							</view>
						</view>
						<view class="stapone" >
							<view class="staponeleft">
								加油包单价：
							</view>
							<input placeholder="元" v-model="comeStandard" type="digit" maxlength="8"/>
							<view class="staponeleft1">
								元
							</view>
						</view>
						<view class="stapone" >
							<view class="staponeleft">
								加油包次数：
							</view>
							<input placeholder="次" v-model="comeNum" type="digit" v-input-limit='0' maxlength="6"/>
							<view class="staponeleft1">
								次
							</view>
						</view>
						<view class="stapone">
							<view class="staponeleft">
								允许同时充电次数：
							</view>
							<van-stepper v-model="numtitle" max="5"  disable-input />
							<view class="staponeleft1">
								次
							</view>
						</view>
						<view class="stapone">
							<view class="staponeleft1" style="margin-left: 0upx;color: red;">
								允许一个用户同时能充的最大次数，默认为1，最大为5；
							</view>
						</view>
						<view class="staptwo" >
							<view class="staptwohand">备注：（100字）</view>
							<textarea maxlength='100'v-model="remarks"/>
						</view>
						<view class="stapthree">
							<!-- <view class="stapthreeleft">保存</view>
							<view class="stapthreeright">删除</view> -->
							<view class="stapthreezhong" @click="xinzbtn">保存</view>
						</view>
					</view>
					
				</van-tab>
				<van-tab title="计时">
					<view class="stap">
						<view class="stapone">
							<view class="staponeleft">
								收费标准：
							</view>
							<input placeholder="元/月" v-model="monthStandard" type="digit" maxlength="8" />
							<view class="staponeleft1">
								元/月
							</view>
						</view>
						<view class="stapone">
							<view class="staponeleft">
								每月限制：
							</view>
							<input placeholder="小时" v-model="monthNum" type="digit" v-input-limit='0' maxlength="6" />
							<view class="staponeleft1">
								小时
							</view>
						</view>
						<view class="stapone">
							<view class="staponeleft">
								加油包单价：
							</view>
							<input placeholder="元" v-model="comeStandard" type="digit" maxlength="8" />
							<view class="staponeleft1">
								元
							</view>
						</view>
						<view class="stapone">
							<view class="staponeleft">
								加油包小时数：
							</view>
							<input placeholder="小时" v-model="comeNum" type="digit" v-input-limit='0' maxlength="6" />
							<view class="staponeleft1">
								小时
							</view>
						</view>
						<view class="stapone">
							<view class="staponeleft">
								允许同时充电次数：
							</view>
							<van-stepper v-model="numtitle" max="5"  disable-input />
							<view class="staponeleft1">
								次
							</view>
						</view>
						<view class="stapone">
							<view class="staponeleft1" style="margin-left: 0upx;color: red;">
								允许一个用户同时能充的最大次数，默认为1，最大为5；
							</view>
						</view>
						<view class="staptwo">
							<view class="staptwohand">备注：（100字）</view>
							<textarea maxlength='100' v-model="remarks" />
							</view>
						<view class="stapthree">
							<!-- <view class="stapthreeleft">保存</view>
							<view class="stapthreeright">删除</view> -->
							<view class="stapthreezhong" @click="xinzbtn">保存</view>
						</view>
					</view>
				</van-tab>
				
			</van-tabs>
		</view>
		
	</view>
</template>

<script>
	import {section} from "../../common/section.js";
	// import { Dialog } from 'vant';
	export default {
		components: {},
		mounted() {
			
		},

		data() {
			return {
				projectId:'',
				active: '',
				packageName:'',//套餐名
				monthStandard:'',//包月金额
				monthNum:'',//包月次数/时长（小时）
				comeStandard:0,//加油包金额
				comeNum:0,//加油包次数/时长
				remarks:'',//备注
				numtitle:1,//允许最大购买次数
			}
		},
		onLoad(options) {
			this.projectId=options.projectId;
		},
		methods: {
			//添加一个费率套餐
			xinzbtn(){
				let data={}
				if(this.active==0){
					if(!this.packageName){
						uni.showToast({
							title: '套餐名不能为空',
							duration: 2000,
							icon: "error"
						});
						return;
					}
					data={
						packageName:this.packageName,
						type:'A3',
						minMoney:0,
						lossRate:0,
						isFund:0,
						remarks:this.remarks,
						monthStandard:this.monthStandard,
						monthNum:this.monthNum,
						comeStandard:this.comeStandard,
						comeNum:this.comeNum,
						limitNum:this.numtitle
					}
					
				}else if(this.active==1){
					
					if(!this.packageName){
						uni.showToast({
							title: '套餐名不能为空',
							duration: 2000,
							icon: "error"
						});
						return;
					}
					
					data={
						packageName:this.packageName,
						type:'A1',
						minMoney:0,
						lossRate:0,
						isFund:0,
						remarks:this.remarks,
						monthStandard:this.monthStandard,
						monthNum:this.monthNum,
						comeStandard:this.comeStandard,
						comeNum:this.comeNum,
						limitNum:this.numtitle
					}
				}
				
				let header={
					'content-type': 'application/json '
				}
				this.$base.request1('manager/rate'+'/'+this.projectId, 'POST', data,header)
				.then(res => {
					if(res.data.code==200){
						uni.showToast({
							title: '添加成功',
							duration: 2000,
						});
						uni.navigateBack()
					}else{
						this.$toast.fail(res.data.msg)
						return;
					}
				})
				.catch(err => {
					
				})
				
				
			},
			onClick(){
				this.packageName='',
				this.remarks='',
				this.monthStandard='',
				this.monthNum='',
				this.comeStandard=0,
				this.comeNum=0,
				this.numtitle=1
			},
			//返回上一页
			blackbtn() {
				uni.navigateBack()
			}
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		overflow-x: hidden;
		.hand{
			width: 100%;
			background-color: #4B98ED;
			height: 62upx;
			font-size: 30upx;
			font-family: PingFang SC Bold, PingFang SC Bold-Bold;
			font-weight: 700;
			text-align: center;
			line-height: 62upx;
			color: #ffffff;
			position: relative;
			image{
				width:22upx;
				height: 39upx;
				position: absolute;
				left: 31upx;
				top: 11upx;
			}
		}
		.show{
			/deep/.van-tab {
				font-size: 32upx;
				font-family: PingFang SC Bold, PingFang SC Bold-Bold;
				font-weight: 700;
				color: #999999;
			}
			
			/deep/.van-tab--active {
				font-size: 32upx;
				font-family: PingFang SC Bold, PingFang SC Bold-Bold;
				font-weight: 700;
				color: #4b98ed;
			}
			
			/deep/.van-tabs__line {
				width: 95upx !important;
				height: 4upx;
				border-radius: 2px;
				background-color: #4B98ED;
			}
			.sone{
				width: 100%;
				box-sizing: border-box;
				padding: 0 32upx;
				margin-top: 27upx;
				border-bottom: 1upx solid #c7c7c7;
				padding-bottom: 30upx;
				input{
					// width: 100%;
					font-size: 28upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					text-align: center;
					color: #999999;
					border-bottom: 1upx solid #dedede;
					margin: 0 auto;
					// padding: 25upx 0;
					width: 643upx;
					height: 56upx;
					border: 1upx solid #999999;
					border-radius: 10upx;
				}
			}
			.stap{
				width: 100%;
				box-sizing: border-box;
				padding: 0 32upx;
				.stapone{
					width: 100%;
					margin-top: 40upx;
					display: flex;
					align-items: center;
					.staponeleft{
						font-size: 24upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						text-align: left;
						color: #333333;
						width: 32%;
					}
					.staponeleft1{
						font-size: 24upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						text-align: left;
						color: #333333;
						margin-left: 20upx;
					}
					input{
						font-size: 28upx;
						font-family: PingFang SC Medium, PingFang SC Medium-Medium;
						font-weight: 500;
						text-align: center;
						color: #999999;
						width: 372upx;
						height: 56upx;
						border: 1upx solid #999999;
						border-radius: 10upx;
					}
				}
				
				.staptwo{
					width: 100%;
					.staptwohand{
						font-size: 24upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						text-align: left;
						color: #333333;
						margin-top: 58upx;
					}
					textarea{
						width: 100%;
						height: 243upx;
						border-radius: 16upx;
						box-sizing: border-box;
						background-color: #E5E5E5;
						padding: 32upx;
						margin-top: 23upx;
					}
				}
				.stapthree{
					width: 100%;
					display: flex;
					justify-content: space-between;
					margin-top: 66upx;
					.stapthreezhong{
						width: 686upx;
						height: 88upx;
						border-radius: 8upx;
						background-color: #4B98ED;
						font-size: 32upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						text-align: center;
						line-height: 88upx;
						color: #ffffff;
					}
					.stapthreeleft{
						width: 333upx;
						height: 88upx;
						border-radius: 8upx;
						background-color: #4B98ED;
						font-size: 32upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						text-align: center;
						line-height: 88upx;
						color: #ffffff;
					}
					.stapthreeright{
						width: 333upx;
						height: 88upx;
						border-radius: 8upx;
						background-color: #D2D2D2;
						font-size: 32upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						text-align: center;
						line-height: 88upx;
						color: #ffffff;
					}
				}
				.stapfour{
					width: 100%;
					.stapfourhand{
						width: 100%;
						text-align: center;
						margin-top: 20upx;
						image{
							width: 22upx;
							height: 13upx;
						}
					}
					.stapfourfoot{
						margin-top: 10upx;
						width: 100%;
						font-size: 24upx;
						font-family: PingFang SC Regular, PingFang SC Regular-Regular;
						font-weight: 400;
						text-align: center;
						color: #333333;
					}
				}
				.stapfive{
					width: 100%;
					line-height: 40upx;
					.stapfivehand{
						font-size: 24upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						color: #333333;
					}
					.stapfivefoot{
						font-size: 24upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 500;
						color: #333333;
					}
				}
				.stapsix{
					width: 258upx;
					height: 64upx;
					border: 2upx solid #4b98ed;
					border-radius: 8upx;
					font-size: 24upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					text-align: center;
					line-height: 64upx;
					color: #4b98ed;
					margin: 30upx auto;
				}
				.stapseven{
					width: 100%;
					display: flex;
					align-items: center;
					border-bottom: 1upx solid #dfdfdf;
					.stapsevenleft{
						font-size: 24upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						color: #333333;
						width: 35%;
					}
					input{
						font-size: 28upx;
						font-family: PingFang SC Medium, PingFang SC Medium-Medium;
						font-weight: 500;
						color: #999999;
					}
				}
			}
		}
		/deep/.van-popup--center{
			border-radius: 16upx;
		}
		.tan{
			width: 636upx;
			height: 465upx;
			border-radius: 16upx;
			background-color: #FFFFFF;
			box-sizing: border-box;
			.tanhand{
				font-size: 32upx;
				font-family: PingFang SC Bold, PingFang SC Bold-Bold;
				font-weight: 700;
				text-align: center;
				color: #333333;
				margin-top: 40upx;
			}
			.tanone{
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 62upx;
				input{
					width: 169upx;
					box-sizing: border-box;
					padding-left: 30upx;
					font-size: 28upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					color: #999999;
					border: 1upx solid #999999;
					border-radius: 10upx;
					padding-bottom: 15upx;
				}
				.tanonetap{
					width: 64px;
					height: 1px;
					background-color: #dddddd;
					margin:0 25upx;
				}
			}
			.tantwo{
				width: 169upx;
				margin: 0 auto;
				margin-top: 40upx;
				input{
					width: 169upx;
					box-sizing: border-box;
					text-align: center;
					font-size: 28upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					color: #999999;
					border: 1upx solid #999999;
					border-radius: 10upx;
					padding-bottom: 15upx;
				}
			}
			.tanbtn{
				width: 100%;
				display: flex;
				justify-content: center;
				margin-top: 87upx;
				.tanbtnleft{
					width: 191upx;
					height: 64upx;
					border-radius: 8upx;
					background-color: #BFBFBF;
					font-size: 28upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					text-align: center;
					line-height: 64upx;
					color: #ffffff;
					margin-right: 61upx;
				}
				.tanbtnright{
					width: 191upx;
					height: 64upx;
					border-radius: 8upx;
					background-color: #4B98ED;
					font-size: 28upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					text-align: center;
					line-height: 64upx;
					color: #ffffff;
				}
			}
		}
	
	}
</style>
